<template>
  <div class="header d-flex jc-between ai-center">
    <div class="d-flex jc-between ai-center">
      <div class="mr-10">
        <img
          :src="rowData.avatar"
          alt=""
          style="width: 40px; height: 40px; border-radius: 50%"
        />
      </div>
      <div>
        <div>
          <div class="d-flex ai-center">
            <span style="margin-right: 10px">
              {{ rowData.userName }}
            </span>
            <img :src="rowData.vipLevel" alt="" v-if="rowData.level" />
          </div>
          <div class="mt-5 fs-14" style="color: #7e7e7e">
            {{ rowData.title }}
          </div>
        </div>
      </div>
    </div>
    <div>
      <ft-icon
        @click="close"
        name="el-icon CloseBold"
        size="24"
        color="#959595"
      ></ft-icon>
    </div>
  </div>
  <div class="content">
    <div class="content_top mt-20">
      <span style="color: #f56d1c; margin-right: 10px">
        充电单号：{{ rowData.charge_order }}
      </span>
      <span
        v-if="rowData.state == 2"
        style="
          margin-right: 10px;
          font-size: 14px;
          color: #fff;
          background-color: #03bf8f;
          padding: 2px 8px;
        "
      >
        正常单自动结算
      </span>
      <span
        style="
          margin-right: 10px;
          font-size: 14px;
          color: #fff;
          background-color: #7e7e7e;
          padding: 2px 8px;
        "
      >
        充电已结束
      </span>
    </div>
    <div class="mt-20 d-flex ai-center jc-between">
      <div class="content_item">
        <div>
          <span style="color: #7e7e7e">用户账号：</span>
          <span>{{ rowData.userNumber }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e">用户昵称：</span>
          <span>{{ rowData.userName }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e">充电车辆：</span>
          <span>{{ rowData.terminal_name }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e">归属机构：</span>
          <span>{{ rowData.company }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e">充电方式：</span>
          <span v-if="rowData.charge_type == '101'">蜂潮智行平台用户</span>
          <span v-if="rowData.charge_type == '102'"
            >蜂潮智行企业用户（机构）</span
          >
          <span v-if="rowData.charge_type == '103'">微信小程序</span>
          <span v-if="rowData.charge_type == '104'">支付宝</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e">订单类型：</span>
          <span>{{ rowData.orderType }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e">交易类型：</span>
          <span v-if="rowData.payType == 0">余额</span>
          <span v-if="rowData.payType == 1">余额+R值</span>
          <span v-if="rowData.payType == 2">米豆</span>
          <span v-if="rowData.payType == 3">微信</span>
          <span v-if="rowData.payType == 4">支付宝</span>
        </div>
      </div>
      <div class="content_item">
        <div>
          <span style="color: #7e7e7e">终端名称：</span>
          <span>{{ rowData.terminal_name }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e">电桩品牌：</span>
          <span>{{ rowData.terminal_name }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e">电桩功率：</span>
          <span>{{ rowData.terminal_name }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e">电站名称：</span>
          <span>{{ rowData.state_name }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e">运营商：</span>
          <span>{{ rowData.operator }}</span>
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e">运营商属性：</span>
          {{ rowData.operatorType == 1 ? "[自营]" : "[加盟]" }}
        </div>
        <div class="mt-10">
          <span style="color: #7e7e7e">充电模式：</span>
          {{ rowData.chargeModel == 0 ? "单充" : "双枪并充" }}
        </div>
      </div>
    </div>
    <div class="content_detil mt-20">
      <div style="color: #f56d1c; width: 100%; text-align: left">
        订单结束原因：结束充电，SOC达到100%
      </div>
      <div class="mt-20 content_timeLine">
        <div class="content_line"></div>
        <div class="mt-20 ">
          <el-steps :active="4" align-center>
          <el-step title="准备充电"  :description="rowData.start_time" />
          <el-step title="开始充电" :description="rowData.start_time" />
          <el-step title="结束充电" :description="rowData.end_time" />
          <el-step title="订单结算" :description="rowData.settlement_time" />
        </el-steps>
      </div>
      </div>
    </div>
    <div class="content_table mt-20">
      <div style="color: #333;">
        电站价明细
      </div>
      <div class="mt-20" style="border: 1px solid #cdcbcb;border-radius: 4px;">
        <div class="fs-16" style="color: #333;padding: 20px;background-color: #FAFAFA;">
          充电明细（尖峰平谷定价模式）
        </div>
        <div class="d-flex ai-center jc-between pt-20 pb-20 pl-20" style="background: #FFFFFF;color: #333;">
          <div class="fs-14" style="width: 20%;">
            充电时段
          </div>
          <div class="fs-14" style="width: 20%;">
            电费单价（元/度）
          </div>
          <div class="fs-14" style="width: 20%;">
            服务费单价（元/度）
          </div>
          <div class="fs-14" style="width: 20%;">
            充电度数（度）
          </div>
          <div class="fs-14" style="width: 20%;">
            费用（元）
          </div>
        </div>
        <div v-for="(item,index) in moneyList.list" :key="index" class="d-flex ai-center jc-between pt-20 pb-20 pl-20" :style="index % 2 == 0 ? 'background: #FAFAFA;' : 'background: #FFFFFF;'">
          <div class="fs-14" style="width: 20%;" :style="index == moneyList.list.length - 1 ? 'color: #03BF8F;' : 'color: #333;'">
            {{item.time_slot}}
          </div>
          <div class="fs-14" style="width: 20%;" :style="index == moneyList.list.length - 1 ? 'color: #03BF8F;' : 'color: #333;'">
            {{item.price}}
          </div>
          <div class="fs-14" style="width: 20%;" :style="index == moneyList.list.length - 1 ? 'color: #03BF8F;' : 'color: #333;'">
            {{item.service}}
          </div>
          <div class="fs-14" style="width: 20%;" :style="index == moneyList.list.length - 1 ? 'color: #03BF8F;' : 'color: #333;'">
           {{item.degrees}}
          </div>
          <div class="fs-14" style="width: 20%;" :style="index == moneyList.list.length - 1 ? 'color: #03BF8F;' : 'color: #333;'">
            {{item.cost}}
          </div>
        </div>
        <div class="d-flex ai-center jc-between pt-20 pb-20 pl-20" style="background: #FAFAFA;color: #333;">
          <div class="fs-14" style="width: 60%;">
            总计 (总时长: {{ moneyList.total_time }})
          </div>
          <div class="fs-14" style="width: 20%;">
            {{moneyList.total_degrees}}
          </div>
          <div class="fs-14" style="width: 20%;">
            {{moneyList.total_cost}}
          </div>
        </div>
      </div>
    </div>
    <div class="content_table mt-20">
      <div style="color: #333;">
        充电明细
      </div>
      <div class="mt-20" style="border: 1px solid #cdcbcb;border-radius: 4px;">
        <div class="d-flex ai-center jc-between pt-20 pb-20 pl-20" style="background: #FFFFFF;color: #333;">
          <div class="fs-14" style="width: 20%;">
            充电时段
          </div>
          <div class="fs-14" style="width: 20%;">
            电费单价（元/度）
          </div>
          <div class="fs-14" style="width: 20%;">
            服务费单价（元/度）
          </div>
          <div class="fs-14" style="width: 20%;">
            充电度数（度）
          </div>
          <div class="fs-14" style="width: 20%;">
            费用（元）
          </div>
        </div>
        <div v-for="(item,index) in moneyList1.list" :key="index" class="d-flex ai-center jc-between pt-20 pb-20 pl-20" :style="index % 2 == 0 ? 'background: #FAFAFA;' : 'background: #FFFFFF;'">
          <div class="fs-14" style="width: 20%;" :style="index == moneyList.list.length - 1 ? 'color: #03BF8F;' : 'color: #333;'">
            {{item.time_slot}}
          </div>
          <div class="fs-14" style="width: 20%;" :style="index == moneyList.list.length - 1 ? 'color: #03BF8F;' : 'color: #333;'">
            {{item.price}}
          </div>
          <div class="fs-14" style="width: 20%;" :style="index == moneyList.list.length - 1 ? 'color: #03BF8F;' : 'color: #333;'">
            {{item.service}}
          </div>
          <div class="fs-14" style="width: 20%;" :style="index == moneyList.list.length - 1 ? 'color: #03BF8F;' : 'color: #333;'">
           {{item.degrees}}
          </div>
          <div class="fs-14" style="width: 20%;" :style="index == moneyList.list.length - 1 ? 'color: #03BF8F;' : 'color: #333;'">
            {{item.cost}}
          </div>
        </div>
        <div class="d-flex ai-center jc-between pt-20 pb-20 pl-20" style="background: #FAFAFA;color: #333;">
          <div class="fs-14" style="width: 60%;">
            总计 (总时长: {{ moneyList1.total_time }})
          </div>
          <div class="fs-14" style="width: 20%;">
            {{moneyList1.total_degrees}}
          </div>
          <div class="fs-14" style="width: 20%;">
            {{moneyList1.total_cost}}
          </div>
        </div>
      </div>
    </div>
    <div class="content_table mt-20">
      <div style="color: #333;">
        充电费用信息
      </div>
      <div class="mt-20" style="border: 1px solid #cdcbcb;border-radius: 4px;">
        <div class="d-flex ai-center jc-between pt-20 pb-20 pl-20" style="background: #FFFFFF;">
          <div class="fs-14" style="width: 20%;color: #333;">
            电费
          </div>
          <div class="fs-14" style="width: 60%;color: #7E7E7E;">
            所有折扣前的电站标价计算出的电费费用=电度数*电站电费标价
          </div>
          <div class="fs-14" style="width: 20%;color: #333;">
            {{costList.degrees}}
          </div>
        </div>
        <div class="d-flex ai-center jc-between pt-20 pb-20 pl-20" style="background: #FFFFFF;">
          <div class="fs-14" style="width: 20%;color: #333;">
            服务费
          </div>
          <div class="fs-14" style="width: 60%;color: #7E7E7E;">
            所有折扣前的电站标价计算出的服务费费用=电度数*电站服务费标价
          </div>
          <div class="fs-14" style="width: 20%;color: #333;">
            {{costList.service}}
          </div>
        </div>
        <div class="d-flex ai-center jc-between pt-20 pb-20 pl-20" style="background: #FAFAFA;">
          <div class="fs-14" style="width: 20%;color: #F56D1C;">
            订单总金额
          </div>
          <div class="fs-14" style="width: 60%;color: #7E7E7E;">
            所有折扣前的电站标价计算出的费用=电费+服务费
          </div>
          <div class="fs-14" style="width: 20%;color: #F56D1C;">
            {{costList.total_cost}}
          </div>
        </div>
      </div>
    </div>
    <div class="content_table mt-20">
      <div style="color: #333;">
        运营商应收信息
      </div>
      <div class="mt-20" style="border: 1px solid #cdcbcb;border-radius: 4px;">
        <div class="d-flex ai-center jc-between pt-20 pb-20 pl-20" style="background: #FFFFFF;">
          <div class="fs-14" style="width: 20%;color: #333;">
            电站活动抵扣
          </div>
          <div class="fs-14" style="width: 60%;color: #7E7E7E;">
            当前订单享受的运营商发起电站折扣活动抵扣金额
          </div>
          <div class="fs-14" style="width: 20%;color: #333;">
            {{costList.activity_deduction}}
          </div>
        </div>
        <div class="d-flex ai-center jc-between pt-20 pb-20 pl-20" style="background: #FFFFFF;">
          <div class="fs-14" style="width: 20%;color: #333;">
            卡券抵扣
          </div>
          <div class="fs-14" style="width: 60%;color: #7E7E7E;">
            所有折扣前的电站标价计算出的服务费费用=电度数*电站服务费标价
          </div>
          <div class="fs-14" style="width: 20%;color: #333;">
            {{costList.card_deduction}}
          </div>
        </div>
        <div class="d-flex ai-center jc-between pt-20 pb-20 pl-20" style="background: #FFFFFF;">
          <div class="fs-14" style="width: 20%;color: #333;">
            R值抵扣
          </div>
          <div class="fs-14" style="width: 60%;color: #7E7E7E;">
            R值只能抵扣服务费（1个R值抵扣0.1元）
          </div>
          <div class="fs-14" style="width: 20%;color: #333;">
            {{costList.R_deduction_money}}
            <span style="font-size: 12px;color: #7E7E7E;margin-left: 10px">{{costList.R_deduction_num}}个</span>
          </div>
        </div>
        <div class="d-flex ai-center jc-between pt-20 pb-20 pl-20" style="background: #FFFFFF;">
          <div class="fs-14" style="width: 20%;color: #333;">
            米豆抵扣
          </div>
          <div class="fs-14" style="width: 60%;color: #7E7E7E;">
            米豆可全额抵扣服务费和电费（1个米豆抵扣0.1元）
          </div>
          <div class="fs-14" style="width: 20%;color: #333;">
            {{costList.M_deduction_num_money}}
            <span style="font-size: 12px;color: #7E7E7E;margin-left: 10px">{{costList.M_deduction_num}}个</span>
          </div>
        </div>
        <div class="d-flex ai-center jc-between pt-20 pb-20 pl-20" style="background: #FAFAFA;">
          <div class="fs-14" style="width: 20%;color: #F56D1C;">
            运营商应收
          </div>
          <div class="fs-14" style="width: 60%;color: #7E7E7E;">
            电费：<span style="color: #F56D1C;margin-right: 20px;">{{ costList.degrees }}</span>
            服务费：<span style="color: #F56D1C;margin-right: 20px;">{{ costList.service }}</span>
          </div>
          <div class="fs-14" style="width: 20%;color: #F56D1C;">
            {{costList.total_cost}}
          </div>
        </div>
      </div>
    </div>
    <div class="content_table mt-20 d-flex ai-center jc-between">
      <div>历史监测数据列表</div>
      <div class="d-flex">
        <div
          class="filter_item"
          :class="filter == 1 ? 'filter_item_yes' : 'filter_item_no'"
          @click="chooseFilter(1)"
          style="border-radius: 4px 0px 0px 4px"
        >
          图表
        </div>
        <div
          class="filter_item"
          :class="filter == 2 ? 'filter_item_yes' : 'filter_item_no'"
          @click="chooseFilter(2)"
          style="border-radius: 0px 4px 4px 0px"
        >
          列表
        </div>
      </div>
    </div>
    <div class="content_echarts mt-20" v-if="filter == 1">
      <pastOrderEcharts ref="chartRef"></pastOrderEcharts>
    </div>
    <div class="content_table mt-20" v-if="filter == 2">
      <pastOrderTabel ref="tableRef"></pastOrderTabel>
    </div>
  </div>
</template>
<script setup>
import pastOrderEcharts from "./pastOrderEcharts.vue";
import pastOrderTabel from "./pastOrderTabel.vue";
import { chargeDetailMoney,chargeDetailMoney1,chargeCostInformation } from "@/api/modules/powerStation";

const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance();

const rowData = ref({});
const getRowData = (params) => {
  rowData.value = params;
  proxy.$refs.chartRef.getData(rowData.value);
  moneyDetil();
  moneyDetil1();
  costDetil();
};
const close = () => {
  emits("close");
};
const moneyList = ref({});
const moneyDetil = async () => {
  const res = await chargeDetailMoney();
  moneyList.value = res.data;
};
const moneyList1 = ref({});
const moneyDetil1 = async () => {
  const res = await chargeDetailMoney1();
  moneyList1.value = res.data;
};
const costList = ref({});
const costDetil = async () => {
  const res = await chargeCostInformation();
  costList.value = res.data;
};

const filter = ref(1);
const chooseFilter = (val) => {
  filter.value = val;
  if (filter.value == 1) {
    setTimeout(() => {
      proxy.$refs.chartRef.getData(rowData.value);
    }, 100);
  } else {
    setTimeout(() => {
      proxy.$refs.tableRef.getData(rowData.value);
    }, 100);
  }
};

defineExpose({
  getRowData,
  close,
});
</script>

<style lang="scss" scoped>
.header {
  border-bottom: 2px solid #f04142;
}
.content {
  height: 90%;
  border: 1px solid blue;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 8px;
    border-radius: 5px;
  }

  &::-webkit-scrollbar-thumb {
    background: #cdcbcb;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }
  &_top {
    background-color: #fafafa;
    padding: 20px;
  }
  &_item {
    width: 45%;
    background-color: #fafafa;
    padding: 20px;
  }
  &_detil {
    background-color: #fafafa;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  &_timeLine {
    margin-top: 17px;
    width: 80%;
    position: relative;

  }
  &_line {
    width: 100%;
    position: absolute;
    top: 31px;
    left: 0px;
    height: 2px;
    background-color: #F56D1C;
  }
}
.filter_item {
  cursor: pointer;
  height: 30px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  width: 45px;
  &_no {
    border: 1px solid #cdcbcb;
    color: $main-color;
  }
  &_yes {
    border: 1px solid var(--el-color-primary);
    color: #fff;
    background-color: var(--el-color-primary);
  }
}
:deep(.el-step__icon.is-text){
  border:0px;
  background-color: #03BF8F;
}
:deep(.el-step__icon){
  width: 12px;
  height: 12px;
}
:deep(.el-step__icon-inner){
  display: none;
}
:deep(.el-step__title.is-finish){
  color: #333333;
}
:deep(.el-step__description.is-finish){
  color: #333333;
}
</style>
